<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据绑定2</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="number" />
        <button onclick="increment">增加</button>
        <h1 v-bind="number"></h1>
    </div>

    <script>
        function Vue(opt) {
            this.init(opt)
        }

        Vue.prototype.init = function (opt) {
            this.$opt = opt;
            this.$el = ducument.querySelector(opt.el)
            this.$methods = opt.methods
            this.$data = opt.data
            this.$binding = {}
            this.observe(this.$data)
            this.compile($el)
        }

        Vue.prototype.observe = function (data) {
            for (key in data) {
                value = data[key]
                if (data.hasOwnProperty(key)) {
                    //   自身属性 指令绑定
                    $binding[key] = {
                        directives: []
                    }
                }
                if (typeof data[key] == "object") {
                    observe(data[key])
                }

                Object.defineProperties($data, key, {
                    enumerable: true,
                    configurable: true,
                    get: function () {
                        return value
                    },
                    set: function (newVal) {
                        if (newVal != value) {
                            $binding[key].directives.forEach(element => {
                                element.update()
                            });
                        }
                    }
                })

            }
        }

        function Updater(el, vm, attr, key) {
            this.$el = el;
            this.$vm = vm;
            this.$expr = expr;
            this.$attr = attr;
            this.$key = key;
        }

        Updater.prototype.update = function () {
            this.$el[$attr] = this.$vm.$data[$key]
        }

        Vue.prototype.compile = function (element) {
            var children = element.children
            if (children.length) {
                for (child in children) {
                    this.compile(child)
                }
            }

            if (element.hasAttribute("v-bind")) {

            
            }
        }
    </script>
</body>

</html>